<!--户籍性质||婚姻状况||户籍所在地-->
<template>
  <div>
    <!--      户籍性质-->
    <van-cell required title="户籍性质"/>
    <van-field
      is-link
      readonly
      clickable
      name="native_type"
      :value="value"
      placeholder="点击选择户籍性质"
      @click="showPicker = true"
      :rules="[{ required: true, message: '请选择户籍性质' }]"
    />
    <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!--婚姻状况-->
    <van-cell required title="婚姻状况"/>
    <van-field
      is-link
      readonly
      clickable
      name="is_marry"
      :value="value2"
      placeholder="点击选择婚姻状况"
      @click="showPicker2 = true"
      :rules="[{ required: true, message: '请选择婚姻状况' }]"
    />
    <van-popup v-model="showPicker2" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
        show-toolbar
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!--户籍所在地-->
    <van-cell required title="户籍所在地"/>
    <van-field
      is-link
      readonly
      clickable
      name="native_addr"
      :value="value3"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom" round>
      <van-area
        :area-list="areaList"
        @confirm="onConfirm3"
        @cancel="showArea = false"
      />
    </van-popup>

    <!--村镇-->
    <van-cell required title="村镇选择"/>
    <van-field
      is-link
      readonly
      clickable
      name="town"
      :value="values4"
      placeholder="点击选择村镇"
      @click="showPicker3 = true"
      :rules="[{ required: true, message: '请选择村镇' }]"
    />
    <van-popup v-model="showPicker3" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
        show-toolbar
        :columns="town"
        @confirm="onConfirm4"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import area from '@/assets/js/area.js'

export default {
  name: 'content3',
  data () {
    return {
      value: '',
      value2: '',
      values3: '',
      values4: '',
      showPicker: false,
      showPicker2: false,
      showPicker3: false,
      showArea: false,
      // 户籍性质
      columns: [],
      // 婚姻状况
      columns2: [],
      // 村镇
      town: [],
      areaList: { ...area },
      value3: ''
    }
  },
  methods: {
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    // 婚姻状况确认处理函数
    onConfirm2 (value) {
      this.value2 = value
      this.showPicker2 = false
    },
    // 户籍所在地确认处理函数
    onConfirm3 (values) {
      this.value3 = values.map((item) => item.name).join('/')
      this.showArea = false
    },
    onConfirm4 (value) {
      this.values4 = value
      this.showPicker3 = false
    }
  },
  mounted () {
    const that = this
    // 户籍性质和婚姻状况数据渲染
    this.$ajax.get('api/v1/options').then(function (res) {
      const data = res.data.data
      const obj = data.native_type
      const marry = data.is_marry
      for (const i in obj) {
        that.columns.push(obj[i])
      }
      for (const i in marry) {
        that.columns2.push(marry[i])
      }
    })
    this.$ajax.get('api/v1/region/town', {
      params: {
        county_id: 500101
      }
    }).then(function (res) {
      const data = res.data.data
      for (let i = 0; i < data.length; i++) {
        that.town.push(data[i].town_name)
      }
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
